<template>
  <div id="app">
    <!-- 搜索框模块 -->
    <div class="clearfix" style="margin-bottom:20px;">
      <div style="width:500px;float:left">
        <el-input placeholder="请输入查询条件" v-model="pageInfo.orgName" class="input-with-select" @keyup.enter.native="search()">
        <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
        </el-input>
      </div>
      <el-button type="primary" style="float:right" @click="dialogAddVisible = true">添加用户</el-button>
    </div>

  <!-- 信息展示模块 -->
  <el-table :data="tableData" borderstyle="width: 100%" border>
    <el-table-column type="index" label="序号" width="180"></el-table-column>
    <el-table-column prop="userName" label="用户名" width="180"></el-table-column>
    <el-table-column prop="trueName" label="姓名" width="180"></el-table-column>
    <el-table-column prop="tel" label="联系电话" width="180"></el-table-column>
    <el-table-column prop="levName" label="级别名称" width="180"></el-table-column>
    <el-table-column prop="roleName" label="角色" width="180"></el-table-column>
    <el-table-column  label="操作">
      <template slot-scope="scope">
      <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
      <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row)"></el-button>
      </template>
    </el-table-column>
   
  </el-table>
  <el-pagination style="width:560px" :page-size="pageInfo.size"  layout="prev, pager, next" :pager-count="11"
      :total="total" background 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page">
</el-pagination>


<!-- 添加弹出框模块 -->
  <el-dialog title="添加用户" :visible.sync="dialogAddVisible" width="30%">
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item label="用户名" :label-width="formLabelWidth" prop="userId">
      <el-input v-model="form.userId" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
      <el-input v-model="form.password" autocomplete="off" show-password></el-input>
    </el-form-item>
    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input v-model="form.trueName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="联系电话" :label-width="formLabelWidth">
      <el-input v-model="form.tel" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="讲师级别" :label-width="formLabelWidth">
      <el-select v-model="form.levName" placeholder="请选择讲师级别" style="width:100%">
        <el-option v-for="item in levs" :key="item.id" :label="item.name" :value='item.id+","+item.name'></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="用户角色" :label-width="formLabelWidth" >
      <el-select v-model="form.roleList" multiple style="width:100%">
        <el-option v-for="item in roles"  :label='item.name' :value='item.id+","+item.name' :key='item.id'></el-option>
      </el-select>
    </el-form-item>
    
  </el-form>
  <div slot="footer" class="dialog-footer" style="text-align:center">
    <el-button type="primary" @click="add('form')">提交</el-button>
    <el-button @click="dialogAddVisible = false">取 消</el-button>
  </div>
</el-dialog>


<!-- 修改弹出框模块 -->
  <el-dialog title="修改用户" :visible.sync="dialogEditVisible" width="30%">
  <el-form :model="editForm" :rules="rules" ref="editForm">
    <el-form-item label="用户名" :label-width="formLabelWidth" prop="userId">
      <el-input v-model="editForm.userId" autocomplete="off"></el-input>
    </el-form-item>
     <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
      <el-input v-model="editForm.password" autocomplete="off" show-password></el-input>
    </el-form-item>
    <el-form-item label="姓名" :label-width="formLabelWidth">
      <el-input v-model="editForm.trueName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="联系电话" :label-width="formLabelWidth">
      <el-input v-model="editForm.tel" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="讲师级别" :label-width="formLabelWidth">
      <el-select v-model="form.levName" placeholder="请选择讲师级别" style="width:100%">
        <el-option v-for="item in levs" :key="item.id" :label="item.name" :value='item.id+","+item.name'></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="用户角色" :label-width="formLabelWidth" >
      <el-select v-model="form.roleList" multiple style="width:100%">
        <el-option v-for="item in roles"  :label='item.name' :value='item.id+","+item.name' :key='item.id'></el-option>
      </el-select>
    </el-form-item>
  </el-form>
    <div slot="footer" class="dialog-footer" style="text-align:center">
      <el-button type="primary" @click="update('editForm')">提交</el-button>
      <el-button @click="dialogEditVisible = false">取 消</el-button>
  </div>      

  
</el-dialog>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
export default {
  name: 'collegeList',
  data() {
      return {
        pageInfo:{
          page:1,//当前页码
          size:2,//前台默认分页条数
          roleName:"一般管理员"
        },
        total:0,
        select:'',
        dialogAddVisible: false,//控制添加弹窗是否显示
        dialogEditVisible: false,//控制修改弹窗是否显示
        levs:[{
          id:"01",
          name:"助教"},
        {
          id:"02",
          name:"讲师"
        },
        {
          id:"03",
          name:"副教授"
        },{
          id:"04",
          name:"教授"
        }],
        roles:[
          {id:"001",
          name:"管理员"},
          {id:"002",
          name:"教师"},
          {id:"003",
          name:"住校经理"},
          {id:"004",
          name:"教务"},

        ],
        form: {
         userId: '',
         trueName:'',
         tel: '',
         levName:'',
         password:'',
         roleList: []
        },
        //编辑使用的后台查询方法获取的数据，editform必须为空
        editForm: {
            userId: '',
            trueName:'',
            tel: '',
            levName:'',
            password:'',
            roleList: []
        },
        //添加院校名称的限制规则
        rules: {
          userId: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
            {  max: 50, message: '用户名不能超过50个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' },
            // {  max: 50, message: '用户名不能超过50个字符', trigger: 'blur' }
          ]
        },
        formLabelWidth: '120px',
        //显示用户列表
        tableData: [
             {
                userId: '张三',
                trueName:'占山',
                tel: '15147878787',
                levName:'讲师'
            },
        ]
      }
    },
  components: {
    // HelloWorld
  },
  created(){
    this.render();//渲染数据
  },
  methods: {
    async render(){ 
      const { data: res } = await this.$http.post('usersinfo/findall',this.pageInfo) // 获取数据
      this.total=res.data.recordCount;
      //console.log(res)
      if (res.ret !== 0) {
         return this.$message.error(res.msg)
      }
      this.tableData=res.data.resList;
    },
    //查询教室级别信息
    async teacherlevel(){
    	
    	const {data: res} = await this.$http.post('teacherlevel/queryall');
    	this.levs=
    	
    },
    
    
    //增加用户方法
    add(formName){
      this.$refs[formName].validate(async valid => {
        if (!valid) return
        // 可以发起添加用户的网络请求 
        //const { data: res } = await this.$http.post('orginfo/save', this.form)
        //清空添加面板
       // this.form.userId="";
        //this.form.trueName="";
        //this.form.tel="";
        //this.form.levName="";

        this.$message.success('添加用户成功！')
        // 隐藏添加用户对话框
        this.dialogAddVisible = false;
        // 重新获取用户列表数据
        //this.render()
        //var levs = [];
        //levs = res.data;
        //for(var i = 0; i < grades.length; i++) {
          //grades[i].id = grades[i].gradeName + "," + grades[i].id;
        //}
        //this.gradeOptions = grades;
        console.log(this.form)
      })
    },
     //修改用户弹框带数据方法
    async edit(scope){
      this.dialogEditVisible=true;
      //console.log(scope.id);
      const { data: res } = await this.$http.post('orginfo/findById',{id : scope.id})
      //抛出异常错误
      if (res.ret !== 0) {
         return this.$message.error(res.msg)
      }
      this.editForm=res.data;
    },
    //更新用户信息方法
    async update(form){
     this.$refs[form].validate(async valid => {
        if (!valid) return
        // 发起修改用户信息的数据请求
        const { data: res } = await this.$http.post('orginfo/update',this.editForm)
        //抛出异常错误
       if (res.ret !== 0) {
         return this.$message.error(res.msg)
      }
        // 关闭对话框
        this.dialogEditVisible=false;
        // 刷新数据列表
        this.render();
        // 提示修改成功
        this.$message.success('修改用户信息成功！')
      })
    },
     // 根据Id删除对应的用户信息
    async del(row) {
      // 弹框询问是否删除数据
      const confirmResult = await this.$confirm(
        '此操作将删除该用户所有信息, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)

      // 如果确认删除，则返回值为字符串 confirm
      // 如果取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      }

      //异步数据库删除
      const { data: res } = await this.$http.post('orginfo/deleteById',{id : row.id})
      //抛出异常错误
       if (res.ret !== 0) {
         return this.$message.error(res.msg)
      }

      this.$message.success('删除用户成功！')
      this.render()
    },
    //页面输入页码的处理
    handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        //this.pageInfo.page=val;
      },
      //页面更改页码处理函数
    handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);  
        this.pageInfo.page=val;
        //console.log(this.pageInfo.page)
        this.render()
    },
    async search(){
      // 发起模糊查询的数据请求
      const { data: res } = await this.$http.post('orginfo/findall',this.pageInfo)
      //console.log(res)
      this.tableData=res.data.resList;
      this.total=res.data.recordCount;
      //抛出异常错误
      if (res.ret !== 0) {
        return this.$message.error(res.msg)
      }
    }
     
  }
}

</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.el-select .el-input {
    width: 130px;
}
.input-with-select{
   width:500px;
}
.input-with-select .el-input-group__prepend {
    background-color: #fff;  
}
.clearfix{*zoom:1}
.clearfix:after{
  display: block;
  content:"";
  height:0;
  clear: both;
  visibility: hidden;
}
.el-select .el-input{
  width:100%;
  }
</style>
